<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">

    <script th:src="@{js/jquery-3.3.1.min.js}" charset="utf-8"></script>
    <script th:src="@{layui/layui.js}" charset="utf-8"></script>
</head>
<body class="layui-body" style="left: 0px">
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-body" style="padding: 10px;">
                    <!-- 表格工具栏 -->
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">用户名</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="username" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">请选择日期</label>
                                <div class="layui-input-inline">
                                    <input type="text" size="6" class="layui-input" id="beginData" name="beginData" placeholder="yyyy年MM月dd日">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">结束日期</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="endData" name="endData" placeholder="yyyy-MM-dd" autocomplete="on" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <!-- 搜索提交为button -->
                                <button  id="btn-search" type="button" class="layui-btn layui-btn-primary"
                                         lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                            </div>
                        </div>
                    </form>

                    <!-- 数据表格 -->
                    <table id="test" lay-filter="userTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>


<!--表格头-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除多个 </button>
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add" > 添加 </button>
    </div>
</script>

<!--表格右边的操作-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="look">查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="shenhe">审核</a>
</script>

<script th:inline="javascript">
    //定义一个重新加载table的方法
    //相当于再次点击查询即刷新
    // function refreshTable() {
    //     $("#btn-search").click();
    //  }

    layui.use(['table','form'],function () {
        var table = layui.table;
        table.render({
            elem: '#test',
            url: '/api/user',
            toolbar: '#toolbarDemo',
            title: '用户信息',

            cols: [[
                {type: 'checkbox'} //开启复选框
                , {field: 'id', width: 80, title: '序号', sort: true}
                , {field: 'nickName', width: 120, title: '昵称'}
                , {field: 'phone', width: 120, title: '手机号' }
                , {
                    field: 'authStatus', width: 150, title: '认证状态', templet: function (data) {
                        if (data.authStatus == 0) {
                            return "未认证"
                        } else if (data.authStatus == 1) {
                            return "认证中"
                        } else if (data.authStatus == 2) {
                            return "认证成功"
                        } else {
                            return "认证失败"
                        }
                    }
                }
                , {
                    field: 'status', width: 80, title: '状态', templet: function (data) {
                        if (data.status == 1) {
                            return "正常"
                        } else {
                            return "锁定"
                        }
                    }
                }
                , {field: 'createTime', width: 200, title: '创建时间', sort: true}
                //与上面的操作进行绑定
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]

            // // ,page:true
        });

        //跳转到详情页面携带id
        table.on('tool(userTable)',function (obj) {
            var data = obj.data;//获取当前行数据
            var layEvent = obj.event;//获取当前事件
            if (layEvent === 'look') {
                var index = layer.open({
                    title: '详情',
                    type: 2,
                    shade: 0.5,
                    maxmin: true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: 'api/user/listUI?id=' + data.id


                });
            }else if (layEvent === 'shenhe'){
                    var index = layer.open({
                        title: '审核',
                        type: 2,
                        shade: 0.5,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '80%'],
                        content: 'api/user/shenHeUI?id=' + data.id


                    });
            }
        })

    })


</script>

</body>
</html>